<template>
  <div class="soubg">
    <div class="sou">
      <!--Begin 所在收货地区 Begin-->
      <span class="s_city_b">
        <span class="fl">送货至：</span>
        <span class="s_city">
          <span>四川</span>
          <div class="s_city_bg">
            <div class="s_city_t"></div>
            <div class="s_city_c">
              <h2>请选择所在的收货地区</h2>
              <table
                border="0"
                class="c_tab"
                style="width: 235px; margin-top: 10px"
                cellspacing="0"
                cellpadding="0"
              >
                <tr>
                  <th>A</th>
                  <td class="c_h"><span>安徽</span><span>澳门</span></td>
                </tr>
                <tr>
                  <th>B</th>
                  <td class="c_h"><span>北京</span></td>
                </tr>
                <tr>
                  <th>C</th>
                  <td class="c_h"><span>重庆</span></td>
                </tr>
                <tr>
                  <th>F</th>
                  <td class="c_h"><span>福建</span></td>
                </tr>
                <tr>
                  <th>G</th>
                  <td class="c_h">
                    <span>广东</span><span>广西</span><span>贵州</span
                    ><span>甘肃</span>
                  </td>
                </tr>
                <tr>
                  <th>H</th>
                  <td class="c_h">
                    <span>河北</span><span>河南</span><span>黑龙江</span
                    ><span>海南</span><span>湖北</span><span>湖南</span>
                  </td>
                </tr>
                <tr>
                  <th>J</th>
                  <td class="c_h">
                    <span>江苏</span><span>吉林</span><span>江西</span>
                  </td>
                </tr>
                <tr>
                  <th>L</th>
                  <td class="c_h"><span>辽宁</span></td>
                </tr>
                <tr>
                  <th>N</th>
                  <td class="c_h"><span>内蒙古</span><span>宁夏</span></td>
                </tr>
                <tr>
                  <th>Q</th>
                  <td class="c_h"><span>青海</span></td>
                </tr>
                <tr>
                  <th>S</th>
                  <td class="c_h">
                    <span>上海</span><span>山东</span><span>山西</span
                    ><span class="c_check">四川</span><span>陕西</span>
                  </td>
                </tr>
                <tr>
                  <th>T</th>
                  <td class="c_h"><span>台湾</span><span>天津</span></td>
                </tr>
                <tr>
                  <th>X</th>
                  <td class="c_h">
                    <span>西藏</span><span>香港</span><span>新疆</span>
                  </td>
                </tr>
                <tr>
                  <th>Y</th>
                  <td class="c_h"><span>云南</span></td>
                </tr>
                <tr>
                  <th>Z</th>
                  <td class="c_h"><span>浙江</span></td>
                </tr>
              </table>
            </div>
          </div>
        </span>
      </span>
      <!--End 所在收货地区 End-->
      <span class="fr">
        <span class="fl" v-if="loginName == null"
          >你好，请<router-link :to="{ name: 'Login' }">登录</router-link>&nbsp;
          <router-link :to="{ name: 'Register' }" style="color: #ff4e00"
            >免费注册</router-link
          >&nbsp;|&nbsp;</span
        >
        <span v-if="loginName != null"
          ><el-dropdown size="mini">
            <span class="el-dropdown-link">
              欢迎，{{ loginName
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="loginOut">
                退出登录 <i class="el-icon-switch-button"></i>
              </el-dropdown-item>
            </el-dropdown-menu> </el-dropdown
        ></span>
        <span class="ss">
          <div class="ss_list">
            <router-link :to="{name: 'FavoriteList'}">收藏夹</router-link>
            <!-- <div class="ss_list_bg">
              <div class="s_city_t"></div>
              <div class="ss_list_c">
                <ul>
                  <li><a href="#">我的收藏夹</a></li>
                  <li><a href="#">我的收藏夹</a></li>
                </ul>
              </div>
            </div> -->
          </div>
         <!--  <div class="ss_list">
            <a href="#">客户服务</a>
            <div class="ss_list_bg">
              <div class="s_city_t"></div>
              <div class="ss_list_c">
                <ul>
                  <li><a href="#">客户服务</a></li>
                  <li><a href="#">客户服务</a></li>
                  <li><a href="#">客户服务</a></li>
                </ul>
              </div>
            </div>
          </div> -->
          <div class="ss_list">
            <a href="#">网站导航</a>
            <div class="ss_list_bg">
              <div class="s_city_t"></div>
              <div class="ss_list_c">
                <ul>
                  <li><router-link :to="{name: 'IndexCenter'}">回到首页</router-link></li>
                  <li><router-link :to="{name: 'UserList1'}" v-if="loginName">个人信息</router-link></li>
                  <li><router-link :to="{name: 'AddressList'}" v-if="loginName">收货地址</router-link></li>
                  <li><router-link :to="{name: 'GoodsList'}">商品列表</router-link></li>
                </ul>
              </div>
            </div>
          </div>
        </span>
        <span class="fl">|&nbsp;关注我们：</span>
        <span class="s_sh"
          ><a href="#" class="sh1">新浪</a
          ><a href="#" class="sh2">微信</a></span
        >
        <span class="fr"
          >|&nbsp;<a href="#"
            >手机版&nbsp;<img
              src="@/assets/images/s_tel.png"
              align="absmiddle" /></a
        ></span>
      </span>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Dropdown, DropdownItem, DropdownMenu, Icon } from "element-ui";
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Icon);
export default {
  data() {
    return {
      loginName: null,
      sessionStorage: window.sessionStorage,
    };
  },
  methods: {
    loginOut() {
      this.$messageBox.confirm("是否要退出登录？将跳转到登录页面", "提示", {  
        confirmButtonText: '确定',  
        cancelButtonText: '取消',  
        type: 'warning'  
      }).then(() => {  
        //退出登录，清空token和sessionStorage中的数据
        this.$axios({
          url: '/api/user/loginout',
          method: "POST",
        }).then(() => {
          this.sessionStorage.removeItem("loginName");
          this.sessionStorage.removeItem("token");
          this.sessionStorage.removeItem("type")
          this.sessionStorage.removeItem("order")
          this.loginName = null;
          this.$router.push({name: 'Login'});
        })
      }).catch(() => {
        
      })
    },
  },
  created() {
    this.loginName = this.sessionStorage.getItem("loginName");
  },

};
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>